<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%-- <%@ taglib prefix="form1" uri="http://www.springframework.org/tags/form"%> --%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Success</title>


<!-- <script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script> -->
<!-- <script type="text/javascript" src="resources/js/jquery.plugin.js"></script> -->
<!-- <script type="text/javascript" src="resources/js/jquery.datepick.js"></script> -->
<!-- <script type="text/javascript" src="resources/js/jquery.dataTables.js"></script> -->
<!-- <script type="text/javascript" src="resources/js/DT_bootstrap.js"></script> -->

<!-- <script type="text/javascript" src="resources/js/jquery.serializejson.js"></script>
<script type="text/javascript" src="resources/js/jquery.serializejson.min.js"></script> -->
<!-- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->

<style>
.error {
	color: #ff0000;
}
.errorblock{
	color: #000;
	background-color: #ffEEEE;
	border: 3px solid #ff0000;
	padding:8px;
	margin:16px;
}
.dialog
{
}
</style>
</head>
<body>
<div align="center">
	<form name="empForm" id="form1">
		<%-- <form:errors path="*" cssClass="errorblock" element="div"></form:errors> --%>

		<!-- </form> -->
		<!--  <form id="form2" method="post" action="GetProjDetails"> -->
		<div id="projdiv">
			<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered" align="center" width="600">
				 <tr>
					          <th colspan="3">Display Project Details </th>
			     </tr>
				 
				 <tr>

								
								<td>Enter Proj : <input name="projnm" type="text" id="projName"/></td>
				           		<td><input type="button" value="Lookup" onclick="DisplayProjMatchingNameandID()" /></td>
								<td style="width:0%">
								<div id="projnames"  class="hideme" >
								<select name="slist" id="projNameList"  onchange="loadProjResourceDetailTable()" >
									<option name="option" value="select">---------------Select--------------</option>
								</select>
								<!-- <textarea name="projlist"> --></textarea>
					     	   </div></td>
			    		</tr>
				 		<tr>
				 			<td colspan="3">
				 				<div id="rp_proj_resource_detail" class="hideme">
				 					<table id="projresourcetbl" class="display" cellspacing="0" width="90%">
				 						<thead>
				 							<tr>
						 						<th>PROJ_RESOURCE_ID</th>
						 						<th>RESOURCE_ID</th>
						 						<th>SIGNUM</th>
						 						<th>PROJ_ID</th>
						 						<th>ALLOCATION_STARTDATE</th>
						 						<th>ALLOCATION_ENDDATE</th>
						 						<th>ALLOCATION_PERCENTAGE</th>
						 						<th>CHANGE ALLOCATION</th>						 						
						 					</tr>
					 					</thead>
										<tfoot>
											<tr>
					 							<th>PROJ_RESOURCE_ID</th>
					 							<th>RESOURCE_ID</th>
					 							<th>SIGNUM</th>
					 							<th>PROJ_ID</th>
					 							<th>ALLOCATION_STARTDATE</th>
					 							<th>ALLOCATION_ENDDATE</th>
					 							<th>ALLOCATION_PERCENTAGE</th>
					 							<th>CHANGE ALLOCATION</th>					 							
					 						</tr>
					 					</tfoot>					 				
				 					</table>
				 				</div>
				 				
				 			</td>
				 		</tr>
			</table>
		</div>
		<!--<div id="empdiv">
			<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered" align="center" width="600">
			 <tr>
				          <th colspan="2">Insert Resource </th>
		     </tr>
			 
			 <tr>
				           <td>Enter Emp ID:</td>
				           <td><input name="empId" type="text" id="empID"/></td>
		     </tr>
			 <tr>
				            <td colspan="2" align="center"><input type="button" value="LookupEmployee" onclick="CheckIfEmpIsPresentInDB()" /></td>
			 </tr>
			</table>
		</div>-->
		<div class="dialog" id="dialog-form" title="Change Employee Allocation">
		<form>
		<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered" align="center" width="600">
			 <tr>
				          <th colspan="2">Change Allocation </th>
		     </tr>
			 <tr>
				           <td>Selected Employee:</td>
				           <td><input name="emp" type="text" id="emp"/></td>
		     </tr>
			 <tr>
				           <td>Allocation start date:</td>
				           <td><input name="startdate" type="text" id="startdate"/></td>
		     </tr>
		     <tr>
				           <td>Allocation end date:</td>
				           <td><input name="enddate" type="text" id="enddate"/></td>
		     </tr>
		     <tr>
				           <td>Allocation Percentage:</td>
				           <td><input name="pencent" type="text" id="percent"/></td>
		     </tr>
			<!--  <tr>
				            <td colspan="2" align="center"><input type="button" value="Change Allocation" onclick="CheckIfEmpIsPresentInDB()" /></td>
			 </tr>  -->
			  <tr>
			 	<td colspan = "2">
			 		<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
			 	</td>
			 </tr> 
			</table>
			</form>
		</div>
	</form>

</div>

<style>
.hideme { display: none; }

#dialog-form {
    display: none;
}

input.text { margin-bottom:12px; width:95%; padding: .4em; }
</style>


<script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
 <link rel="stylesheet" type="text/css" href="resources/theme/jquery.datepick.css"/>
<link rel="stylesheet" type="text/css" href="resources/theme/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="resources/theme/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="resources/theme/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="resources/theme/jquery-ui.css"/>
<script type="text/javascript" src="resources/js/jquery.plugin.js"></script>
<script type="text/javascript" src="resources/js/jquery.datepick.js"></script> 
<script type="text/javascript" src="resources/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="resources/js/jquery.plugin.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui.js"></script>
<!--<script type="text/javascript" src="resources/js/DT_bootstrap.js"></script> 
 <script type="text/javascript" src="resources/js/jquery.serializejson.js"></script>
<script type="text/javascript" src="resources/js/jquery.serializejson.min.js"></script> -->
<script type="text/javascript">
 $(document).ready(function() {
	//alert("here");
  //  $('#projresourcetbl').dataTable();
	//$("#projresourcetbl").dataTable().fnDestroy();
	
	
/* 	
	
	
	 $('#startdate').focus(function()
			 {
		 		$('#startdate').datepicker(); 
		 		//console.log("hello in click");
			 });	
	 $('#enddate').focus(function()
			 {
		 		$('#enddate').datepicker(); 
		 		//console.log("hello in click");
			 }); */	
		
}); 
$(function(){
	$('#startdate').datepicker();
}) ;
$(function(){
	$('#enddate').datepicker();
}) ;
function checkEmployeeAllocation()
{
	var sgn = $('#signum').val();
	alert(sgn);
	var targetURL = "http://localhost:8080/rm/checkEmployeeallocation/"+sgn;
	$.ajax({
		type : "GET",
		url : targetURL,
		dataType : "json",
		success : function(response)
		          {
			
		          }
	})
}
function CheckIfEmpIsPresentInDB()
{
	//console.log($('#form1'));
	jsonData = $('#form1').serialize();
	//console.log(jsonData);
	var id = $('#empID').val();
	//alert("1");
	var targetURL = "http://localhost:8080/rm/checkEmployee/"+id;
	//alert("targetURL="+targetURL);
	//alert("rrrrrrrrrrrr-->"+$('#form1').serializeJSON());
	$.ajax({
		type : "GET",
		url : targetURL,
		data : $('#form1').serialize(),
		dataType : "json",
		success : function(response)
				 {
						//alert("2"+response);
						//alert("3+response.status= "+response.status);
						if(response.status == "Entity is found")
						{
							//alert("5");
							$('#projdiv').show();
						}
						else
						{
							alert("Emp not found");
						}
				 }
	});
	//alert("4");
}

function DisplayProjMatchingName()
{
	var projName = $('#projName').val();
	//alert(projName);
	var targetURL = "http://localhost:8080/rm/displayProjs/"+projName;
	$.ajax({
		type : "GET",
		url : targetURL,
		data : $('#form2').serialize(),
		dataType : "json",
		success : function(response)
				  {
						alert("1");
						//var resp = new Array();
						var select = $('#projNameList');
						for(var i = 0; i< response.length;i++)
						{
							//resp[i]= response[i];
							 var pdata = "<option value="+response[i]+">"+response[i]+"</option>";
				             // alert(pdata);
				             $(pdata).appendTo(select); 
						}
						//resp = response;
						$('#projnames').show();
						//$("textarea[name='projlist']").html(response); 
						
						/* $.each(resp, function(key, value)) {
			                $('<option>').val(resp).text(resp).appendTo(select); */
			            
			               
						
				  }
	})
}

	function DisplayProjMatchingNameandID()
	{
		var projName = $('#projName').val();
		//alert(projName);
		var targetURL = "http://localhost:8080/rm/displayProjNames/"+projName;
		$.ajax({
			type : "GET",
			url : targetURL,
			data : $('#form1').serialize(),
			dataType : "json",
			success : function(response)
					  {
							//alert("1");
							//var resp = new Array();
							//response = [{"projectName":"KDDI","projId":"1"},{"projectName":"DTAC","projId":"2"},{"projectName":"KDDI","projId":"KDDI_FMC"}];
							//JSONArray arr = response
							
							var select = $('#projNameList');
							var responseStr = $.parseJSON(JSON.stringify(response));
							//console.log(responseStr);
							select.find('option').remove();
							$('<option>').val("select").text("select").appendTo(select);
						    $.each(responseStr, function(key, value) {
				           //console.log("k"+key.projId);
				            	//console.log("v"+value.projId);
				                $('<option>').val(value.projId).text(value.projectName).appendTo(select);
				            });
							$('#projnames').show();
					   }
		})
}	
	
	function loadProjResourceDetailTable()
	{
		//var tblname=$('#projresourcetbl');
		//alert("111");
		if( $.fn.dataTable.isDataTable('#projresourcetbl'))
	    {
			$('#projresourcetbl').dataTable().fnDestroy();
	    }
		var projId = $('#projNameList').val();//projNameList
		//alert("projId="+projId);
		if(projId=="select")
		{
			alert("Select a project");
		}
		else
		{	
			var targetURL="http://localhost:8080/rm/displayProjResourceDetailTable/"+projId;
			var tblname=$('#projresourcetbl');
	   	    $('#projresourcetbl').dataTable( {
	    	
		 	"ajax" :{
				url : targetURL,
				dataSrc : ""
				},
			"columns" :[
		            		{"data":"proj_resource_id"},
		    	            {"data":"resourceID"},
		    	            {"data": function(obj)
		    	               	{	         	
									return '<div class="'+"signum"+obj.proj_resource_id+'">'+obj.signum+'</div>';
	    	            		}  
		    	            //"signum"
		    	            },
		    	            {"data": function(obj)
		    	            	{
		    	            		return '<div class="'+"projId"+obj.proj_resource_id+'">'+obj.projId+'</div>';
		    	            	}
		    	            //"projId"
	   	    				},
		    	            {"data":function(obj)
		    	            	{
	    	            			return '<div class="'+"alloc_stdt_"+obj.proj_resource_id+'">'+obj.allocation_start_date+'</div>';
	    	            		}
		    	            
		    	            //	"allocation_start_date"},
		    	            },
		    	            {"data":function(obj)
		    	            	{
    	            				return '<div class="'+"alloc_endt_"+obj.proj_resource_id+'">'+obj.allocation_end_date+'</div>';
    	            			}
		    	            	//"allocation_end_date"},
							},
		    	            {"data":function(obj)
		    	            	{
    	            				return '<div class="'+"alloc_per_"+obj.proj_resource_id+'">'+obj.allocation_percentage+'</div>';
    	            			}
		    	            	//"allocation_percentage"},
							},
		    	            {"data": function(obj)
		    	            	{		    	            	
		    	            	    var prid = obj.proj_resource_id;
		    	            	 	//console.log("->"+obj);
		    	            		return "<a id='modal' href='javascript:openModal("+"\""+prid+"\""+");'>Change Allocation</a>";		    	            	
		    	            	}
		    	            }
		    	            
				     ]							    
	    	});

		     $('#rp_proj_resource_detail').show();				     
		}		  
	}		
	
	function openModal(prid)
	{
	//	var div = $('#modal');
		//console.log(obj);

		diag = $('#dialog-form').dialog({    		
			height	: 400,
    		width	: 500,
    	    modal	: true,
    	    buttons	: {
    	    	"Change the Allocation": save_data,
    	    	Cancel	: function()
    	    	{
    	    		diag.dialog("close");
    	    	}
    	    },
			open : function get_data()
			{
				var emp = $('#emp');
				 //alert("emp ="+emp);
			    emp.attr("disabled",true);
				emp.val($('#projresourcetbl').find('.signum'+prid).html());
				 $('#startdate').val("");
				 $('#enddate').val("");
				 $('#percent').val("");
			}
    	});
		
		function save_data()
		{
			//alert("here"+sg);
			var table = $('#projresourcetbl').DataTable();
			
			/* var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {
			    return table.cell( rowIdx, 2 ).data() === sg ? true : false;
			} );*/
				
			// alert("2----"+prid);
			 var id = $('#projId');
			 console.log($('#projresourcetbl').find('.projId'+prid).html());		 
			 
			 //console.log($('#projresourcetbl').find(".projId_"+).children("td:contains('ESANSRA')"));
			/* $('#projresourcetbl').children("tr").children("td").contains("ESANSRA").on( 'click', 'tr', function () {
				  var rowData = table.row( this ).data();
				  // ... do something with `rowData`
				  
				  alert("rowData"+rowData);
				} ); */
			//var data = table.row(0).data();
			 var stdate = $('#startdate');
			 var edate = $('#enddate');
			 var pc = $('#percent');
			 
			
			 
			 $('#projresourcetbl').find('.alloc_stdt_'+prid).html(stdate.val());
			 $('#projresourcetbl').find('.alloc_stdt_'+prid).css({'text-shadow': '2px 2px 8px blue'});
			 $('#projresourcetbl').find('.alloc_endt_'+prid).html(edate.val());
			 $('#projresourcetbl').find('.alloc_endt_'+prid).css({'text-shadow': '2px 2px 8px blue'});
			 $('#projresourcetbl').find('.alloc_per_'+prid).html(pc.val());
			 $('#projresourcetbl').find('.alloc_per_'+prid).css({'text-shadow': '2px 2px 8px blue'});
			diag.dialog("close");
		
		} 
		
		//alert("startdate"+stdate); 
		return false;
	}
	
	
</script>
</body>
</html>